<template>
	<view class="wrapper">
		<Header title="活 动" color="#333" fontSize="40rpx"></Header>
		<!-- <view style="height: 160rpx;">
			<view style="height: 160rpx;width: 100%;display: flex;">
				<view style="height: 60rpx;width: 100%; margin-top: 110rpx;font-size: 32rpx;display: flex;">
					<view style="width: 100%;text-align: center;line-height: 32rpx;font-size: 40rpx;color: #000000;">
						<text>活动</text>
					</view>
				</view>
			</view>
		</view> -->
		<view class="activity-list">
			<view class="item" v-for="(item, index) in activityList" :key="index" @click="jumpTo(item)">
				<view class="img">
					<image :src="item.image" :alt="item.activityName"></image>
				</view>
				<view class="title">{{ item.activityName }}</view>
			</view>
			<view class="loadingicon acea-row row-center-wrapper">
				<text class="loading iconfont icon-jiazai" :hidden="loading==false"></text>{{loadTitle}}
			 </view>
		</view>		
		<view class="adContainer">
		  <ad unit-id="adunit-9a2b0e23252035e2" ad-intervals="30"></ad>
		</view>
	</view>
</template>

<script>
	import Header from '@/pages/components/header.vue'
	import {
		getActivityList
	} from '@/api/activity.js'
	
	// 在页面中定义插屏广告
	let interstitialAd = null

	export default {
		components: {
			Header
		},
		data() {
			return {
				activityList: [],
				loading: false,				
				loadTitle:'加载更多',
				loadend: false, // 加载到底部
				page: 1, // 页数
				pagesize: 10, // 每页条数
			}
		},
		onLoad() {
			// 在页面onLoad回调事件中创建插屏广告实例
			if (wx.createInterstitialAd) {
			  interstitialAd = wx.createInterstitialAd({
			    adUnitId: 'adunit-597119604ddaa23d'
			  })
			  interstitialAd.onLoad(() => {})
			  interstitialAd.onError((err) => {})
			  interstitialAd.onClose(() => {})
			}
		},
		onShow() {
			this.getList();
			// 在适合的场景显示插屏广告
			if (interstitialAd) {
			  interstitialAd.show().catch((err) => {
			    console.error(err)
			  })
			}
		},
		async onTabItemTap(item) {
			
		},
		methods: {
			// 链接地址跳转
			jumpTo(record) {
				if (record.url) {
					// var regexp = /^(https?://)([0-9a-z.]+)(:[0-9]+)?([/0-9a-z.]+)?(?[0-9a-z&=]+)?(#[0-9-a-z]+)?/i
					var regexp = /((http|https):\/\/([\w\-]+\.)+[\w\-]+(\/[\w\u4e00-\u9fa5\-\.\/?\@\%\!\&=\+\~\:\#\;\,]*)?)/ig;
					var url = record.url.match(regexp)
					// 匹配外部链接地址
					if (url && typeof(url)!="undefined" && url!=0) {
						uni.navigateTo({
							url: '../outlink?url=' + encodeURIComponent(record.url)
						})
						// window.open(encodeURI(urls));
					} else {
						uni.navigateTo({
							url: record.url
						})
					}
				} else {
					uni.navigateTo({
						url: './detail?id=' + record.activityId
					})
				}
			},
			/**获取数据*/
			async getList(isPage) {
				if (isPage) {
					this.loadend = false
					this.page = 1
					this.activityList = []
				}
				if (this.loading) return
				if (this.loadend) return
				this.loading = true
				this.loadTitle = ''
				uni.showLoading({
					title: '数据加载中...',
					mask: true
				});
				const query = {
					page: this.page,
					pagesize: this.pagesize,
					categoryId: 1
				}
				getActivityList(query).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						const list = res.data.lists
						this.loadend = list.length < this.pagesize
						this.activityList = [...this.activityList, ...list]
						this.loadTitle = this.loadend ? '我也是有底线的' : '加载更多'
						this.page++
					} else {
						uni.showToast({
							title: '获取数据失败！',
							duration: 1000,
							icon: 'none',
						});
					}
					this.loading = false
				});
				uni.hideLoading()
			}
		},
		/**
		   * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function () {
			this.getList();
		}
	}
</script>

<style lang="less" scoped>
@import './index.less';
.adContainer{width: 100%;}
</style>